<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
    <title>reviews</title>
    <!-- Bootstrap Core CSS -->
    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- chartist CSS -->
    <link href="../assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
    <link href="../assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
    <link href="../assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="css/colors/blue.css" id="theme" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<meta name = "format-detection" content = "telephone=no" />
<!--login-->
<link rel="stylesheet" type="text/css" href="../css/login/ui2.css?2013032917">
<!-- login popup-->
<link rel="stylesheet" href="../css/login/bootstrap1.css">

<!--search css-->
<link rel="stylesheet" type="text/css" href="../css/search/normalize.css" />
<link rel="stylesheet" href="../css/search/font-awesome.min.css">
<link rel="stylesheet" href="../css/search/style3.css">

<link rel="icon" href="../images/favicon.ico">
<link rel="shortcut icon" href="../images/favicon.ico" />
<link rel="stylesheet" href="../css/form.css">
<link rel="stylesheet" href="../css/stuck.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/info/css/style.css">

<script src="../js/jquery.js"></script>
<script src="../js/jquery-migrate-1.1.1.js"></script>
<script src="../js/script.js"></script> 
<script src="../js/superfish.js"></script>
<script src="../js/jquery.equalheights.js"></script>
<script src="../js/jquery.mobilemenu.js"></script>
<script src="../js/jquery.easing.1.3.js"></script>
<script src="../js/tmStickUp.js"></script>
<script src="../js/jquery.ui.totop.js"></script>
<script src="../js/TMForm.js"></script>
<script src="../js/modal.js"></script>
<!--login-->
<script src="../js/login/loginView.js"></script> 
<script>
 $(document).ready(function(){
  $().UItoTop({ easingType: 'easeOutQuart' });
  $('#stuck_container').tmStickUp({});
  }); 
</script>
<!-- jpage -->
    <script src="../js/infojs/jquery-1.11.0.min.js"></script>
    <style type="text/css">
    .listu{margin-left: 0;padding-left: 0px; overflow:hidden;height: 900px;width:1100px;}
    .fydiv{width: 1050px;height: 50px;margin: 0 auto;margin-top: 0px;}
.fenye{text-align: center;height: 30px;margin: 0 auto;}
.fenye li{float: left;border:1px solid #adacac;height: 26px;line-height: 26px;margin-right: 10px;}
.fenye li:hover{background-color: #f1f1f1;}
.fenye li a{text-decoration: none;color:#adacac; display: block; }
.prev{width: 66px;}
.next{width: 66px;}
.numb{width: 26px;}
.choose{border:1px solid #000!important;}
.choose a{color: #000!important;}
    </style>
</head>
</head>

<body class="fix-header card-no-border logo-center">
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <header>
            <!--==============================
            Stuck menu
=================================-->
  <section id="stuck_container">
    <div class="container">
      <div class="row">
        <div class="grid_12">
        <h1>
          <a href="../index.html">
            <img src="../images/logo1.png" alt="Logo alt">
          </a>
        </h1>  
          <div class="navigation">
            <nav>
                <div style="margin-left: 13px;"class="search d1">
                    <form>
                      <input type="text" placeholder="Search……">
                      <button type="submit"></button>
                                        </form>
                    </div>
              <ul style="margin-left: 90px;margin-bottom:40px;" class="sf-menu">           
               <li class="current"><a href="../index.html">Home</a></li>
               <li><a href="../restaurantGallery.html">Gallery</a></li>
               <li><a href="../index-2.html">Reservation</a></li>
               <li><a href="../contact.html">Contacts</a></li>
                             <li><a data-category="UserAccount" data-toggle="modal" href="#login-modal">Log in | Sign up</a></li>
                             <li><a href="information.html">lty</a></li>
             </ul>
            </nav>        
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
  </section> 
        </header>
        <!-- ============================================================== -->
        <!-- End Topbar header -->
        <!-- ============================================================== -->
        
        <!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper" style="background: #FFFFFF">
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container">
                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <!-- Row -->
                <div class="row" style="margin-left: -12px">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Recent Comments</h4>
                                <h6 class="card-subtitle">Latest Comments on users from Material</h6> </div>
                            <!-- ============================================================== -->
                            <!-- Comment widgets -->
                            <!-- ============================================================== -->
                            <div class="comment-widgets m-b-20">
                                                       <div class="fydiv">
                                        <ul class="fenye">
                                            <!--分页页码-->
                                        </ul>
                                    </div>
                                   
                                    <ul class="listu">
                                        <!--分页内容-->
                                    </ul>
                                    
                            <script type="text/javascript"> 
                                getPage(1);
//翻页
function getPage(pn){
  var dataCount=10;//总数据条数
  var pageSize=4;//每页显示条数
  var pageCount= Math.ceil(dataCount / pageSize);//总页数
  if(pn==0||pn>pageCount){
    return;
  }
  var ul=$(".listu");
  ul.empty();
  //console.log(pageCount+"..."+pn)
  paintPage(pageCount,pn);   //绘制页码
  var startPage = pageSize * (pn - 1);

  var names=["James Anderson","Michael Jorden","Johnathan Doeting","James Anderson"];
  var dates=["April 14, 2016","April 14, 2016","April 14, 2016","April 14, 2016"];
  var states=["label-info","label-success","label-danger","label-info"];
  var reviews=["Pending","Approved","Rejected","Pending"];
  var note="Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has beenorem Ipsum is simply dummy text of the printing and type setting industry.";

  if (pageCount == 1) {     // 当只有一页时 
    for (var j = 0; j < dataCount; j++) {  
        var x=j%4+1;
        var active = "Approved";
        if(reviews[x-1]==active){
        var e="<div class=\"d-flex flex-row comment-row\"><div class=\"p-2\"><span class=\"round\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\"><h5>"+names[x-1]+"</h5><div class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span> <span class=\"action-icons active\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\">"+note+"</p></div></div>";
        ul.append(e);  
        }else{
        var e="<div class=\"d-flex flex-row comment-row\"><div class=\"p-2\"><span class=\"round\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\"><h5>"+names[x-1]+"</h5><div class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span> <span class=\"action-icons\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\">"+note+"</p></div></div>";
        ul.append(e);   
        } 
    }
  }else {      // 当超过一页时 
    var e=""; 
    var endPage = pn<pageCount?pageSize * pn:dataCount;
    for (var j = startPage; j < endPage; j++) {  
        var x=j%4+1;
      var active = "Approved";
        if(reviews[x-1]==active){
        var e="<div class=\"d-flex flex-row comment-row\"><div class=\"p-2\"><span class=\"round\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\"><h5>"+names[x-1]+"</h5><div class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span> <span class=\"action-icons active\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\">"+note+"</p></div></div>";
        ul.append(e);  
        }else{
        var e="<div class=\"d-flex flex-row comment-row\"><div class=\"p-2\"><span class=\"round\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\"><h5>"+names[x-1]+"</h5><div class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span> <span class=\"action-icons\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\">"+note+"</p></div></div>";
        ul.append(e);   
        } 
    }
  }
}

//绘制页码
  function paintPage(number,currNum)  //number 总页数,currNum 当前页  
  {
    var pageUl=$(".fenye");
    pageUl.empty();
    var ulDetail="";

    if(number==1){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:void(0)\">prev</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:getPage(1)\">1</a></li>"+
        "<li class=\"next\"><a href=\"javascript:void(0)\">next</a></li>";
    }else if(number==2){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage(1)\">prev</a></li>"+
        "<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+
        "<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage(2)\">next</a></li>";
    }else if(number==3){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">prev</a></li>"+
        "<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+
        "<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+
        "<li class=\"numb"+choosele(currNum,3)+"\"><a href=\"javascript:getPage(3)\">3</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">next</a></li>";
    }else if(number==currNum&&currNum>3){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">prev</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-2)+")\">"+parseInt(currNum-2)+"</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage("+currNum+")\">next</a></li>";
    }else if(currNum==1&&number>3){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:void(0)\">prev</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:void(0)\">1</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage(2)\">2</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage(3)\">3</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage(2)\">next</a></li>";
    }else{
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">prev</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">"+parseInt(currNum+1)+"</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">next</a></li>";
    }

    $(".fenye").append(ulDetail);

  }

  function choosele(num,cur){
    if(num==cur){
        return " choose";
    }else{
        return "";
    }
  }
</script>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Row -->
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Right sidebar -->
                <!-- ============================================================== -->
                <!-- .right-sidebar -->
                <div class="right-sidebar">
                    <div class="slimscrollright">
                        <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                        <div class="r-panel-body">
                            <ul id="themecolors" class="m-t-20">
                                <li><b>With Light sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
                                <li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
                                <li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
                                <li class="d-block m-t-30"><b>With Dark sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
                                <li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
                                <li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
                            </ul>
                            <ul class="m-t-20 chatonline">
                                <li><b>Chat option</b></li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End Right sidebar -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- End footer -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Wrapper -->
    <!-- ============================================================== -->

                    <!--==============================
              footer
=================================-->
<footer id="footer" style="height:150px; background: #aaaaaa;">
  <div class="container" >
    <div class="row" >
      <div style="margin-bottom:100dx;" class="grid_12" style="margin-top:50px">  
        <div class="socials">
          <a href="#" class="fa fa-twitter"></a>
          <a href="#" class="fa fa-facebook"></a>
          <a href="#" class="fa fa-google-plus"></a>
          <a href="#" class="fa fa-pinterest"></a>
        </div>
        <div class="copyright"><span class="brand">Yummy </span> &copy; <span id="copyright-year"></span> | <a href="#">Privacy Policy</a> <div>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="Yummy">Yummy</a> - Collect from <a href="http://www.cssmoban.com/" title="Yummy" target="_blank">Yummy</a></div>
        </div>
      </div>
    </div>
  </div> 
</footer> 
    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="../js/infojs/jquery.slimscroll.js"></script>
    <!--Wave Effects -->
    <script src="../js/infojs/waves.js"></script>
    <!--Menu sidebar -->
    <script src="../js/infojs/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Custom JavaScript -->
    <script src="../js/infojs/custom.min.js"></script>
    <!-- ============================================================== -->
    <!-- This page plugins -->
    <!-- ============================================================== -->
    <script src="../assets/plugins/skycons/skycons.js"></script>
    <!-- chartist chart -->
    <script src="../assets/plugins/chartist-js/dist/chartist.min.js"></script>
    <script src="../assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"></script>
    <script src="../js/infojs/dashboard3.js"></script>
    <!-- ============================================================== -->
    <!-- Style switcher -->
    <!-- ============================================================== -->
    <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
</body>

</html>